<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        .flip-box {
            background-color: transparent;
            width: 300px;
            height: 200px;
            border: 1px solid #f1f1f1;
            perspective: 1000px;
        }

        .flip-box-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

        /* 当鼠标放上去, 大盒子 翻转过来 : */
        .flip-box:hover .flip-box-inner {
            transform: rotateY(180deg);
        }

        /*       相对父元素 100% 撑开:    */
        .flip-box-front,
        .flip-box-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .flip-box-front {
            background-color: #bbb;
            color: black;
        }


        /*   先把背后的文字实现 镜像的效果 */
        .flip-box-back {
            background-color: dodgerblue;
            color: white;
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>

    <h1>3D Flip Box (Horizontal)</h1>
    <h1>  不支持 ie  </h1>
    <h3>Hover over the box below:</h3>



    <div class="flip-box">
        <div class="flip-box-inner">
            <div class="flip-box-front">
                <h2>Front Side</h2>
            </div>
            <div class="flip-box-back">
                <h2>Back Side</h2>
            </div>
        </div>
    </div>

    <pre>
    <h2>

        实现文字镜像的效果:
        transform: rotateY(180deg);
        
        https://www.w3schools.com/howto/howto_css_flip_box.asp
    
    </h2>
    </pre>


    <h1>ABCDE</h1>
    <h1 style="transform: rotateX(180deg);">ABCDE</h1>

    <hr>
    transform: rotateY(180deg):
    <h1 style="transform: rotateY(180deg);">ABCDE</h1>

</body>

</html>